<script setup lang="ts">
import { orderStatusMap } from '@/constants/order'

interface Props {
  active: number
}
defineProps<Props>()

// 从orderStatusMap中过滤掉-1项，然后获取所有值作为步骤
const steps = Object.entries(orderStatusMap)
  .filter(([key]) => key !== '-1')
  .map(([, value]) => value)
</script>
<template>
  <el-card shadow="hover" class="step-card">
    <!-- 纵向步骤条 -->
    <el-steps direction="vertical" :active="active" finish-status="success" space="72">
      <el-step v-for="(title, idx) in steps" :key="idx" :title="title" :icon="null" />
    </el-steps>
  </el-card>
</template>

<style scoped>
.step-card {
  margin-bottom: 16px;
}

.title {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
:deep(.el-step__title) {
  font-size: 14px;
  line-height: 1.6;
  padding-left: 12px;
  color: #909399;
  transition: color 0.3s;
}
:deep(.el-step__head.is-success) .el-step__title,
:deep(.el-step__head.is-process) .el-step__title {
  color: #409eff;
  font-weight: 600;
}

/* 连线颜色渐变 */
:deep(.el-step__line) {
  background: linear-gradient(to bottom, #c0c4cc, #409eff);
}
</style>
